<template>
	<view class="food-popup" :class="{'food-popup-show': show}">
		<view class="food-popup-mask" @click="show = false"></view>
		<view class="food-popup-main">
			<view class="title-box">
				<text class="title-text">商品规格</text>
				<image @click="show = false" class="close-icon" src="../../static/close.svg" mode="aspectFit"></image>
			</view>
			<view class="food-info">
				<view class="food-info-main">
					<image class="food-image" :src="food.image" mode="aspectFill"></image>
					<view class="name-price">
						<text class="name">{{food.storeName}}</text>
						<text class="price">¥ {{price || food.price}}</text>
					</view>
				</view>
				<rich-text class="food-des" :nodes="food.description || ''"></rich-text>
				<text class="spec-title">规格</text>
				<view class="spec-box-container">
					<block v-for="(attr_item, attr_index) in food.productAttr" :key="attr_index">
						<view class="sublime-title">{{attr_item.attrName}}</view>
						<view class="spec-box">
							<text class="spec-item"
								v-for="(attrValue_item, attrValue_index) in attr_item.attrValue"
								:key="attrValue_index"
								:class="{'spec-item-active': attrValue_item.check}"
								@click="select(attr_index, attrValue_index)">{{attrValue_item.attr}}</text>
						</view>
					</block>
				</view>
				<view class="confirm-button" @click="confirm()">
					<text>确定</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { capitalize } from 'vue';
	export default {
		name: "food-popup",
		props: {
			cart: {}
		},
		data() {
			return {
				show: false,
				food: {
					productAttr: [],
					productValue: {}
				},
				selectedName: [],
				price: 0,
				cartComponent: null
			};
		},
		methods: {
			getFoodDetail(id, component) {
				this.cartComponent = null
				if (component) this.cartComponent = component
				uni.showLoading()
				this.$api.product(id)
				.then(res => {
					uni.hideLoading()
					this.show = true
					let {
						data
					} = res.data
					this.food = data || {
						productAttr: [],
						productValue: {}
					}
					let specification = this.food.productValue
					this.selectedName = new Array(this.food.productAttr.length)
					if (this.cartComponent) {
						this.selectedName = this.cartComponent.item.sku.split(',')
						for (let i = 0; i < this.selectedName.length; i++) {
							let type = this.food.productAttr[i].attrValue
							let index = type.findIndex(item => item.attr == this.selectedName[i])
							if (index != -1) {
								type[index].check = true
							}
						}
					}
				})
			},
			select(index1, index2) {
				if (this.cartComponent) return
				let values = this.food.productAttr[index1].attrValue
				for (let i = 0; i < values.length; i++) {
					if (i == index2) {
						values[i].check = true
						this.selectedName[index1] = values[i].attr
					} else {
						values[i].check = false
					}
				}
				if (this.food.productValue[this.selectedName.join(',')]) {
					this.price = this.food.productValue[this.selectedName.join(',')].price
				}
			},
			confirm() {
				if (this.cartComponent) {
					this.show = false
					return
				}
				let cartItem = this.cartComponent && this.cartComponent.item
				if (cartItem && cartItem.sku == this.selectedName.join(',')) {
					this.show = false
					return
				}
				if (!this.food.productValue[this.selectedName.join(',')]) {
					uni.showToast({
						title: '规格未选择完整',
						icon:'none'
					})
					return
				}
				this.$api.addCart({
					id: cartItem ? cartItem.id : 0,
					uid: 0,
					type: '',
					productId: this.food.id,
					shopId: uni.getStorageSync('info').shopId,
					productAttrUnique: this.food.productValue[this.selectedName.join(',')].unique,
					cartNum: cartItem ? cartItem.cartNum : 1,
					cashierUserId: uni.getStorageSync('info').userId
				}).then(res => {
					this.show = false
					this.cart.getCarts()
				})
			}
		}
	}
</script>

<style scoped>
	@keyframes scaleAndShow {
		0% {
			transform: scale(0);
			opacity: 0;
			visibility: hidden;
		}

		100% {
			transform: scale(1);
			opacity: 1;
			visibility: visible;
		}
	}

	@keyframes scaleAndHide {
		0% {
			transform: scale(1);
			opacity: 1;
			visibility: visible;
		}

		100% {
			transform: scale(0);
			opacity: 0;
			visibility: hidden;
		}
	}

	.food-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
		visibility: hidden;
		animation: scaleAndHide 0.2s forwards;
	}

	.food-popup-show {
		animation: scaleAndShow 0.2s forwards;
	}

	.food-popup-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .5);
		z-index: 99;
		border-radius: 50%;
		transform: scale(1.414);
	}

	.food-popup-main {
		width: calc(100% - (92px * 2));
		background: #fff;
		border-radius: 30px;
		position: relative;
		z-index: 100;
		display: flex;
		flex-direction: column;
		max-height: calc(100vh - 20px);
	}

	.title-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1px dashed #f3f4f5;
		padding: 0 26px;
	}

	.title-text {
		font-size: calc(var(--base) * 16);
		line-height: calc(var(--base) * 16);
		color: #333;
		font-weight: bold;
		padding: 20px 0;
		flex: 1;
		padding-right: 10px;
	}

	.close-icon {
		width: calc(var(--base) * 14);
		height: calc(var(--base) * 14);
		padding: 2%;
	}

	.food-info {
		padding: 15px 27px 26px;
		display: flex;
		flex-direction: column;
		max-height: calc(
			100vh -
			(var(--base) * 16) -
			40px -
			20px -
			36px -
			15px -
			26px
		);
	}

	.food-info-main {
		display: flex;
		flex-direction: row;
	}

	.food-image {
		width: 80px;
		height: 80px;
		border-radius: 18px;
	}

	.name-price {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-left: 15px;
	}

	.name {
		font-size: calc(var(--base) * 14);
		color: #333;
	}

	.price {
		font-size: calc(var(--base) * 12);
		color: #f00;
		font-weight: bold;
	}

	.food-des {
		font-size: calc(var(--base) * 14);
		color: #333;
		padding-top: 12px;
	}

	.spec-title {
		font-size: calc(var(--base) * 18);
		color: #333;
		font-weight: bold;
		padding: 12px 0;
	}
	
	.spec-box-container {
		margin-bottom: 34px;
		overflow: hidden auto;
	}
	
	.sublime-title {
		font-size: calc(var(--base) * 14);
		color: #1890ff;
		font-weight: bold;
		padding: 6px 0;
	}

	.spec-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding-left: 10px;
	}

	.spec-item {
		font-size: calc(var(--base) * 14);
		line-height: calc(var(--base) * 14);
		color: #fff;
		padding: 7px 14px;
		background: #cdcdcd;
		border-radius: 20px;
		margin-right: 14px;
		margin-bottom: 14px;
	}

	.spec-item-active {
		background: #1890ff;
	}

	.confirm-button {
		width: calc(100% - (54px * 2));
		height: 36px;
		min-height: 36px;
		background: #1890ff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 18px;
		align-self: center;
		font-size: calc(var(--base) * 14);
		font-weight: bold;
		color: #fff;
	}
</style>